<!--
Author: W3layouts
Author URL: http://w3layouts.com
-->
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Xiaowei Xu | Projects </title>

  <!-- google fonts -->
  <!-- <link href="//fonts.googleapis.com/css2?family=Jost:wght@300;400;600&display=swap" rel="stylesheet"> -->

  <!-- Template CSS -->
  <link rel="stylesheet" href="assets/css/style-starter.css">
</head>

<body>
  <!-- header -->
  <header id="site-header" class="fixed-top">
    <div class="container">
      <nav class="navbar navbar-expand-lg stroke">
        <a class="navbar-brand" href="index.html">
          <span class="fa fa-laptop"></span> Xiaowei Xu
        </a>
        <!-- if logo is image enable this   
      <a class="navbar-brand" href="#index.html">
          <img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" />
      </a> -->
        <button class="navbar-toggler  collapsed bg-gradient" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"
          aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon fa icon-expand fa-bars"></span>
          <span class="navbar-toggler-icon fa icon-close fa-times"></span>
          </span>
        </button>

        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item @@home__active">
              <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item @@about__active">
                <a class="nav-link" href="about.html">About</a>
            </li>
            <li class="nav-item @@peoples__active">
                <a class="nav-link" href="peoples.html">Peoples</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="projects.html">projects</a>
            </li>
            <li class="nav-item @@publications__active">
                <a class="nav-link" href="publications.html">publications</a>
            </li>
            <li class="nav-item @@datasets__active">
                <a class="nav-link" href="datasets.html">Datasets</a>
            </li>
            <li class="nav-item @@contact__active">
                <a class="nav-link" href="contact.html">Contact</a>
            </li>
          </ul>
        </div>
        <!-- toggle switch for light and dark theme -->
        <div class="mobile-position">
          <nav class="navigation">
            <div class="theme-switch-wrapper">
              <label class="theme-switch" for="checkbox">
                <input type="checkbox" id="checkbox">
                <div class="mode-container">
                  <i class="gg-sun"></i>
                  <i class="gg-moon"></i>
                </div>
              </label>
            </div>
          </nav>
        </div>
        <!-- //toggle switch for light and dark theme -->
      </nav>
    </div>
  </header>
  <!-- //header -->

  <!-- contact breadcrumb -->
  <section class="w3l-about-breadcrumb text-center">
    <div class="breadcrumb-bg breadcrumb-bg-about py-sm-5 py-4">
      <div class="container py-2">
        <h2 class="title">Projects Me</h2>
        <ul class="breadcrumbs-custom-path mt-2">
          <li><a href="#url">Home</a></li>
          <li class="active"><span class="fa fa-arrow-right mx-2" aria-hidden="true"></span> Projects </li>
        </ul>
      </div>
    </div>
  </section>


  <!-- home page about section -->
  <section class="w3l-index3" id="datasets">
    <div class="midd-w3">
      <h2 class="container">2021</h2>

      <div class="midd-w3">
        <div class="container py-lg-5 py-md-3">
          <div class="row">
            <div class="col-lg-2">
              <div class="position-relative">
                <img src="assets/images/xiaowei_Wechat.jpeg" alt="" class="radius-image img-fluid">
              </div>
            </div>
            <div class="col-lg-8 mt-lg-0 mt-5">
              <!-- <h5 class="title-small mb-2">Who am i?</h5> -->
              <h4 class="title">I'm Xiaowei Xu.</h4>
              <p class="mt-4">I work at the Laboratory of Artificial Intelligence and 3D Technologies for
                Cardiovascular Diseases as a co-director. The lab director is Jian Zhuang, previous dean of
                Guangdong Provincial People's Hospital.</p>
            </div>
          </div>
        </div>
      </div>

      <div class="midd-w3">
        <div class="container py-lg-5 py-md-3">
          <div class="row">
            <div class="col-lg-2">
              <div class="position-relative">
                <img src="assets/images/xiaowei_Wechat.jpeg" alt="" class="radius-image img-fluid">
              </div>
            </div>
            <div class="col-lg-8 mt-lg-0 mt-5">
              <!-- <h5 class="title-small mb-2">Who am i?</h5> -->
              <h4 class="title">I'm Xiaowei Xu.</h4>
              <p class="mt-4">I work at the Laboratory of Artificial Intelligence and 3D Technologies for
                Cardiovascular Diseases as a co-director. The lab director is Jian Zhuang, previous dean of
                Guangdong Provincial People's Hospital.</p>
            </div>
          </div>
        </div>
      </div>

  </section>
  
  <!-- //home page about section -->

  <section class="w3l-index3" id="datasets1">
    <div class="midd-w3">
      <h2 class="container">2020</h2>
      <div class="midd-w3">
        <div class="container py-lg-5 py-md-3">
          <div class="row">
            <div class="col-lg-2">
              <div class="position-relative">
                <img src="assets/images/xiaowei_Wechat.jpeg" alt="" class="radius-image img-fluid">
              </div>
            </div>
            <div class="col-lg-8 mt-lg-0 mt-5">
              <h5 class="title-small mb-2">I'm Xiaowei Xu.</h5>
              <p class="mt-4">I work at the Laboratory of Artificial Intelligence and 3D Technologies for
                Cardiovascular Diseases as a co-director. The lab director is Jian Zhuang, previous dean of
                Guangdong Provincial People's Hospital.</p>
            </div>
          </div>
        </div>
      </div>

      <div class="midd-w3">
        <div class="container py-lg-5 py-md-3">
          <div class="row">
            <div class="col-lg-2">
              <div class="position-relative">
                <img src="assets/images/xiaowei_Wechat.jpeg" alt="" class="radius-image img-fluid">
              </div>
            </div>
            <div class="col-lg-8 mt-lg-0 mt-5">
              <h5 class="title-small mb-2">I'm Xiaowei Xu.</h5>
              <p class="mt-4">I work at the Laboratory of Artificial Intelligence and 3D Technologies for
                Cardiovascular Diseases as a co-director. The lab director is Jian Zhuang, previous dean of
                Guangdong Provincial People's Hospital.</p>
            </div>
          </div>
        </div>
      </div>

  </section>


  <section class="w3l-index3" id="dataset2">
    <div class="midd-w3">
      <h2 class="container">2019</h2>
      <div class="midd-w3">
        <div class="container py-lg-5 py-md-3">
          <div class="row">
            <div class="col-lg-2">
              <div class="position-relative">
                <img src="assets/images/xiaowei_Wechat.jpeg" alt="" class="radius-image img-fluid">
              </div>
            </div>
            <div class="col-lg-8 mt-lg-0 mt-5">
              <h4 class="title-big">I'm Xiaowei Xu.</h4>
              <p class="mt-4">I work at the Laboratory of Artificial Intelligence and 3D Technologies for
                Cardiovascular Diseases as a co-director. The lab director is Jian Zhuang, previous dean of
                Guangdong Provincial People's Hospital.</p>
            </div>
          </div>
        </div>
      </div>

      <div class="midd-w3">
        <div class="container py-lg-5 py-md-3">
          <div class="row">
            <div class="col-lg-2">
              <div class="position-relative">
                <img src="assets/images/xiaowei_Wechat.jpeg" alt="" class="radius-image img-fluid">
              </div>
            </div>
            <div class="col-lg-8 mt-lg-0 mt-5">
              <h4 class="title-big">I'm Xiaowei Xu.</h4>
              <p class="mt-4">I work at the Laboratory of Artificial Intelligence and 3D Technologies for
                Cardiovascular Diseases as a co-director. The lab director is Jian Zhuang, previous dean of
                Guangdong Provincial People's Hospital.</p>
            </div>
          </div>
        </div>
      </div>

  </section>

  <!-- Footer -->
  <section class="w3l-footer py-sm-5 py-4">
    <div class="container">
      <div class="footer-content">
        <div class="row">
          <div class="col-lg-8 footer-left">
            <p class="m-0">Xiaowei Xu © Copyright 2020. Design by <a href="https://w3layouts.com">W3layouts</a> </p>
          </div>
          <div class="col-lg-4 footer-right text-lg-right text-center mt-lg-0 mt-3">
            <ul class="social m-0 p-0">
              <li><a href="#facebook"><span class="fa fa-facebook-official"></span></a></li>
              <li><a href="#linkedin"><span class="fa fa-linkedin-square"></span></a></li>
              <li><a href="#instagram"><span class="fa fa-instagram"></span></a></li>
              <li><a href="#twitter"><span class="fa fa-twitter"></span></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- move top -->
    <button onclick="topFunction()" id="movetop" title="Go to top">
      <span class="fa fa-angle-up"></span>
    </button>
    <script>
      // When the user scrolls down 20px from the top of the document, show the button
      window.onscroll = function () {
        scrollFunction()
      };

      function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
          document.getElementById("movetop").style.display = "block";
        } else {
          document.getElementById("movetop").style.display = "none";
        }
      }

      // When the user clicks on the button, scroll to the top of the document
      function topFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
      }
    </script>
    <!-- /move top -->
  </section>
  <!-- //Footer -->

  <!-- all js scripts and files here -->

  <script src="assets/js/theme-change.js"></script><!-- theme switch js (light and dark)-->

  <script src="assets/js/jquery-3.3.1.min.js"></script><!-- default jQuery -->

  <!-- /typig-text-->
  <script>
    const typedTextSpan = document.querySelector(".typed-text");
    const cursorSpan = document.querySelector(".cursor");

    const textArray = ["assistant professor", "Ph.D B.S", "PhD studies"];
    const typingDelay = 200;
    const erasingDelay = 10;
    const newTextDelay = 100; // Delay between current and next text
    let textArrayIndex = 0;
    let charIndex = 0;

    function type() {
      if (charIndex < textArray[textArrayIndex].length) {
        if (!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
        typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
        charIndex++;
        setTimeout(type, typingDelay);
      } else {
        cursorSpan.classList.remove("typing");
        setTimeout(erase, newTextDelay);
      }
    }

    function erase() {
      if (charIndex > 0) {
        // add class 'typing' if there's none
        if (!cursorSpan.classList.contains("typing")) {
          cursorSpan.classList.add("typing");
        }
        typedTextSpan.textContent = textArray[textArrayIndex].substring(0, 0);
        charIndex--;
        setTimeout(erase, erasingDelay);
      } else {
        cursorSpan.classList.remove("typing");
        textArrayIndex++;
        if (textArrayIndex >= textArray.length) textArrayIndex = 0;
        setTimeout(type, typingDelay);
      }
    }

    document.addEventListener("DOMContentLoaded", function () { // On DOM Load initiate the effect
      if (textArray.length) setTimeout(type, newTextDelay + 250);
    });
  </script>
  <!-- //typig-text-->

  <!-- services owlcarousel -->
  <script src="assets/js/owl.carousel.js"></script>

  <!-- script for services -->
  <script>
    $(document).ready(function () {
      $('.owl-two').owlCarousel({
        loop: true,
        margin: 30,
        nav: false,
        responsiveClass: true,
        autoplay: false,
        autoplayTimeout: 5000,
        autoplaySpeed: 1000,
        autoplayHoverPause: false,
        responsive: {
          0: {
            items: 1,
            nav: false
          },
          480: {
            items: 1,
            nav: false
          },
          700: {
            items: 1,
            nav: false
          },
          1090: {
            items: 3,
            nav: false
          }
        }
      })
    })
  </script>
  <!-- //script for services -->

  <!-- script for tesimonials carousel slider -->
  <script>
    $(document).ready(function () {
      $("#owl-demo1").owlCarousel({
        loop: true,
        margin: 20,
        nav: false,
        responsiveClass: true,
        responsive: {
          0: {
            items: 1,
            nav: false
          },
          736: {
            items: 1,
            nav: false
          },
          1000: {
            items: 2,
            nav: false,
            loop: false
          }
        }
      })
    })
  </script>
  <!-- //script for tesimonials carousel slider -->

  <!-- video popup -->
  <script src="assets/js/jquery.magnific-popup.min.js"></script>
  <script>
    $(document).ready(function () {
      $('.popup-with-zoom-anim').magnificPopup({
        type: 'inline',

        fixedContentPos: false,
        fixedBgPos: true,

        overflowY: 'auto',

        closeBtnInside: true,
        preloader: false,

        midClick: true,
        removalDelay: 300,
        mainClass: 'my-mfp-zoom-in'
      });

      $('.popup-with-move-anim').magnificPopup({
        type: 'inline',

        fixedContentPos: false,
        fixedBgPos: true,

        overflowY: 'auto',

        closeBtnInside: true,
        preloader: false,

        midClick: true,
        removalDelay: 300,
        mainClass: 'my-mfp-slide-bottom'
      });
    });
  </script>
  <!-- //video popup -->

  <!-- stats number counter-->
  <script src="assets/js/jquery.waypoints.min.js"></script>
  <script src="assets/js/jquery.countup.js"></script>
  <script>
    $('.counter').countUp();
  </script>
  <!-- //stats number counter -->

  <!-- disable body scroll which navbar is in active -->
  <script>
    $(function () {
      $('.navbar-toggler').click(function () {
        $('body').toggleClass('noscroll');
      })
    });
  </script>
  <!-- disable body scroll which navbar is in active -->

  <!--/MENU-JS-->
  <script>
    $(window).on("scroll", function () {
      var scroll = $(window).scrollTop();

      if (scroll >= 80) {
        $("#site-header").addClass("nav-fixed");
      } else {
        $("#site-header").removeClass("nav-fixed");
      }
    });

    //Main navigation Active Class Add Remove
    $(".navbar-toggler").on("click", function () {
      $("header").toggleClass("active");
    });
    $(document).on("ready", function () {
      if ($(window).width() > 991) {
        $("header").removeClass("active");
      }
      $(window).on("resize", function () {
        if ($(window).width() > 991) {
          $("header").removeClass("active");
        }
      });
    });
  </script>
  <!--//MENU-JS-->

  <!-- bootstrap js -->
  <script src="assets/js/bootstrap.min.js"></script>

</body>

</html>